很多人想看網站的 HTTP 層級行為（請求、回應、Header、狀態碼），但遇到 HTTPS 就乾脆放棄。其實最簡單、最安全的方式，是用瀏覽器內建的 DevTools 匯出 HAR（或直接看 Network 面板）。本次教學將教你從零做到會看，驟簡單、人人可跟。透過瀏覽器 DevTools 的 Network（網路）面板匯出 HAR 檔或截圖，觀察瀏覽器對目標網站之 Request / Response（包含 Header、狀態碼與 timing）。此方法不需解密 TLS，就能看到瀏覽器端的 HTTP 層級資訊。

為什麼要匯出 HAR？

• HAR（HTTP Archive）記錄瀏覽器發出的所有網路請求與回應（包含 Header、狀態碼、Timing、body 等）。
• 即便網站使用 HTTPS，瀏覽器在顯示 Network 內容時已經把流量解密，所以你能看到 request/response 的實際內容（但前提是你的瀏覽器有權限）。
• HAR 很適合做除錯、性能分析、或教學示範，比直接抓封包（Wireshark）對於一般網頁分析更友善。

工具

• Chrome / Edge / Firefox 任一瀏覽器（建議 Chrome）
• 不需額外安裝軟體

步驟（Chrome 舉例；Firefox/Edge 類似）

0. 前置準備

• 使用最新版本的瀏覽器（Chrome/Edge/Firefox）。
• 若要分享 HAR 檔前，先確認沒有包含私人 Cookie、Token、或帳號資訊。

1. 開啟 DevTools → Network

a. 打開 Chrome → 按 F12 或 Ctrl+Shift+I 開啟 DevTools。
b. 選到 Network（網路）分頁。
c. 勾選 Preserve log（保留日誌 / 保留記錄），以免刷新時丟失資料。

為什麼要勾 Preserve log？
因為某些網站在載入時會跳轉或產生多次請求，勾選後你就能完整保留所有請求紀錄，方便分析。

2. 重新載入目標網站並錄下請求

a. 在 Network 面板右上方（或面板任一處）確認還有過濾欄位，可輸入 domain 篩選（例如 ithome）。

b. 在地址列輸入欲分析的網址（例如 https://www.ithome.com.tw）並按 Enter，等待頁面載入完成。
c. 在 Network 面板中找到主文件（Type = document，通常是第一筆、Name 為 / 或網域），點選展開。

3. 檢視單一請求的細節

a. 點選某個請求（例如主 document 或某個 AJAX 請求）。
b. 展開後中間會顯示多個分頁：Headers / Preview / Response / Cookies / Timing。

• Headers：最重要，包含 Request Headers（Host、User-Agent、Accept、Cookie）與 Response Headers（Status、Content-Type、Cache-Control）。
  • 
• Response：回應的原始 body（若為 JSON / HTML / text 可直接閱讀）。
  • 
• Timing：載入時間分解（DNS、TCP、Request、Response 等），方便做效能分析。
  • 

4. 匯出 HAR（存證或給團隊分析）

• Chrome / Edge：Network 面板右鍵 → 點選下載符號 → 儲存 (存檔類型記得改為HAR) 。
  
• Firefox：Network 面板右上齒輪或右鍵document → 點選另存為 HAR。
  

HAR 會包含回應內容（response body），如果頁面含敏感資料（例如 API 回傳 token 或個資），請先編輯或不要上傳原始 HAR。

分享 HAR 前的隱私處理（非常重要）

HAR 可能包含：Cookie、Authorization header、Response body（含個資）。
在分享前請依下列步驟處理：

1. 打開 HAR（可以用 Chrome DevTools 匯入或線上 HAR viewer）。
2. 檢查是否含 Authorization、Cookie、Set-Cookie，以及 response body 內的 email、token 或其他個資。
3. 若有敏感資訊，使用文字編輯或 HAR 編輯工具將他們替換成 REDACTED 再上傳分享。

如何讀 HAR / Network 的重點欄位（初學者快速理解）

• Status（狀態碼）：200 = 成功；301/302 = 重導；404 = 找不到；500 = 伺服器錯誤。
• Method（方法）：GET、POST、PUT、DELETE，看這是讀資料還是送資料。
• Request Headers：
  • Host：目標主機（domain）。
  • User-Agent：瀏覽器資訊。
  • Referer：來源頁面（有助於追蹤流量來源）。
  • Cookie：包含 session 與登入資訊（敏感，勿公開）。
• Response Headers：
  • Content-Type：回傳格式（text/html、application/json 等）。
  • Cache-Control / Expires：快取策略。
  • Set-Cookie：伺服器下發 cookie。
• Timing：可快速判斷哪個階段耗時最多（DNS、TCP handshake、server processing、download）。

注意事項

• 即便網站使用 HTTPS，瀏覽器會在解密後呈現 Request/Response，DevTools 可顯示 header 與回應內容（依同源政策與敏感資料而定）。
• HAR 可能包含：Cookie、Authorization header、Response body（含個資）。
  在分享前請依下列步驟處理：
  1. 打開 HAR（可以用 Chrome DevTools 匯入或線上 HAR viewer）。
  2. 檢查是否含 Authorization、Cookie、Set-Cookie，以及 response body 內的 email、token 或其他個資。
  3. 若有敏感資訊，使用文字編輯或 HAR 編輯工具將他們替換成 REDACTED 再上傳分享。

結語

利用瀏覽器 DevTools 匯出 HAR，是觀察網站 HTTP/HTTPS 行為最快、也最安全的方式。它不需要額外權限或解密流程，對於除錯、效能分析或教學示範都非常適合。分享時請務必遮蔽敏感資訊，尊重使用者隱私。